// 存购票相关的数据  ( 出发地 目的地  乘车时间 是否只看高铁/动车)
import dayjs from "dayjs";

// 导入创建切片的函数

import { createSlice } from "@reduxjs/toolkit";

//调用步骤1导入的函数 创建切片

const ticketSlice = createSlice({
  name: "ticket", //每个切片的 name 必须唯一， 不能重复
  //初始值
  initialState: {
    start: "北京", //出发地
    end: "上海", //目的地
    date: dayjs().format("YYYY-MM-DD"), //乘车时间
    isSpeed: false, //是否
    history: [], //搜索历史
  },
  reducers: {
    //出发地和目的地的交换
    changeCity(state) {
      const temp = state.start;
      state.start = state.end;
      state.end = temp;
    },
    //只看高铁的开关
    changeFlag(state, action) {
      state.isSpeed = action.payload;
    },
    //日期的切换
    changeDate(state, action) {
      state.date = dayjs(action.payload).format("YYYY-MM-DD");
    },
    //把用户点击的城市 存入全局
    //action.payload 是提交的数据 格式为 { name:'end', city:' 城市的名字 '  }
    setCity(state, action) {
      // JS 开发大型项目所存在的必然的问题
      // TS 可以有非常完备的代码智能提示 能够避免单词写错或属性可选值的写错的问题
      state[action.payload.name] = action.payload.city;
    },
    clearHistory(state) {
      state.history = [];
    },
    saveHistory(state, action) {
      //unshift 头部增加      push  尾部增加
      state.history.unshift(action.payload);
      const set = new Set(state.history);
      state.history = Array.from(set);
    },
  },
});

//把创建的切片导出 供上级index 模块进行数据的集成
//注意  这里不是直接把切片导出 而是导出切片的 render
export default ticketSlice.reducer;

export const {
  changeCity,
  changeFlag,
  changeDate,
  setCity,
  clearHistory,
  saveHistory,
} = ticketSlice.actions;
